<template>
    <div class="class-table">
        <!-- 表单 -->
        <el-table 
            :data="tableData" 
            style="width: 100%" 
            border highlight-current-row 
            :header-cell-style="headerClass"
            :cell-style="cellClass">
            <el-table-column   label="角色名称"  >
                <template slot-scope="scope">
                    <p> {{ scope.row.name }}</p>
                </template>
            </el-table-column>

            <el-table-column   label="职位描述"  >
                <template slot-scope="scope">
                    <p> {{ scope.row.content }}</p>
                </template>
            </el-table-column>

            <el-table-column   label="创建时间"  width="180">
                <template slot-scope="scope">
                    <p>{{formatTime(scope.row.createTime)}}</p>
                </template>
            </el-table-column>

            <el-table-column   label="修改时间"  width="180">
                <template slot-scope="scope">
                    <p>{{formatTime(scope.row.updateTime)}}</p>
                </template>
            </el-table-column>

            <el-table-column   label="状态"  width="120" ref="state">
                <template slot-scope="scope" >
                    <p>{{formatState(scope.row.state)}}</p>
                </template>
            </el-table-column>

            <el-table-column label="操作" width="360">
                <template slot-scope="scope">
                <el-button
                    size="mini"
                    type="success"
                    @click="handleAuthorization(scope.$index, scope.row)">授权</el-button>
                <el-button
                    size="mini"
                    type="primary"
                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button
                    size="mini"
                    :type= "scope.row.state ==1 ? 'warning': 'success' "
                    @click="handleDisable(scope.$index, scope.row)">
                        <span v-if="scope.row.state ===1">禁用</span>
                        <span v-if="scope.row.state ===0">开启</span>
                    </el-button>
                <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>  

        <!-- 授权功能-->
        <component-authorization 
            :data="data"
            :roleId="roleId"
            :authorizationDialog ="authorizationDialog">
        </component-authorization>

        <!-- 编辑功能 -->
        <component-edit-form 
            :editData="editData"  
            :editFormDialog="editFormDialog" >
        </component-edit-form>


    </div>
</template>

<script>
import Api from '@/api/Api'
import ComponentEditForm from './EditForm'
import ComponentAuthorization from "./Authorization";
import {formatDate} from '@/utils/Utils'
import Bus  from './Bus'
    export default {
        name: 'Table',
        components: {
            ComponentEditForm,
            ComponentAuthorization
        },
        data () {
            return {
                // 角色id
                roleId: '',
                authorizationDialog: false,
                editFormDialog: false,
                //选中编辑项
                editData: {},
                //授权数据
                innerVisible: false,
                innerVisibleContent: '',
                emptyText: '暂无内容',
                data: this.pData,
            }
        },
        props:{
            tableData: Array,
            total: Number,
            pageSize: Number,
            pData: Array,
        },
        mounted () {
            Bus.$on('addUser',res => {
               this.handleEdit()
            })
        },
        methods : {
            // Table 表头header样式
            headerClass({ row, rowIndex}) {
                return 'background:#eef1f6; border: 1px solid #dfe6ec; color:#1f2d3d; text-align: center; font-size:16px'
            },
            cellClass({row,rowIndex}){
                return 'text-align: center;border: 1px solid #dfe6ec;'
            } ,
            //格式化状态
             formatState (state) {
                return state === 1 ? '正常' : '禁用'
            },
            //格式化时间
            formatTime(time) {
                if(time == null ){
                    return '暂无时间记录'
                }
                let date = new Date(time);
                return formatDate(date,'yyyy-MM-dd hh:mm')
            },
             //点击删除框
            handleDelete(index,row) {
                let state = this.$store.state
                this.$confirm('此操作将删除该角色, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let params = {userId: state.userId,targetId: row.id,organizationId:state.organizationId}
                    //挂载Bus 开启加载中...
                    Bus.$emit('open-v-loading')
                    Api.role.delete(params).then(res => {
                        if(res.data.code ==0){
                            Bus.$emit('close-v-loading',res.data.msg)
                        }else{
                            Bus.$emit('close-v-loading',res.data.msg,'error')
                        }
        
                    }).catch(e => {
                        Bus.$emit('close-v-loading','网络超时,请稍候...')
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                });
            },
            //点击编辑框
            handleEdit (index,row) {
                let rows = row == undefined ? {} : row
                //调用dialog框
                this.editData = rows;
                this.editFormDialog= !this.editFormDialog
            },
            //点击禁用框
            handleDisable(index,row) {
                let state  = row.state === 0 ? 1 : 0
                let params= {id:row.id,state: state}
                //挂载Bus 开启加载中...
                Bus.$emit('open-v-loading',true)
                try{
                    Api.role.modify(params).then(res =>{
                        if(res.data.code ===0){
                            //成功框
                            Bus.$emit('close-v-loading','')
                        }else{
                             Bus.$emit('close-v-loading','')
                        }
                    })
                }catch (e) {
                     Bus.$emit('close-v-loading','')
                }

            },
            // 点击授权框
            handleAuthorization (index,row) {
                //调用dialog框
                this.authorizationDialog = !this.authorizationDialog
                this.roleId= row.id
            },                           
        }
    }
</script>

<style scoped lang="scss">

</style>